<template>
  <div style="background: #fff">
    <div class="title">
      <div>{{ title }}</div>
    </div>
    <div style="padding: 1.875rem">
      <el-form :inline="true">
        <el-form-item v-for="(type, index) in tag" :key="index">
          <el-button type="success" @click="getExcelReport(index)">{{ type }}</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="sta">测评总数：{{ pages.total }}</div>
    <el-table :data="data" stripe style="width: 100%; margin-bottom: 1.875rem">
      <el-table-column prop="id" label="id"></el-table-column>
      <el-table-column prop="name" label="孩子姓名"></el-table-column>
      <el-table-column prop="phone" label="手机号"></el-table-column>
      <el-table-column prop="age" label="年龄"></el-table-column>
      <el-table-column prop="tagCn" label="测评类型"></el-table-column>

      <el-table-column label="操作" width="200">
        <template slot-scope="scope">
          <el-button type="text" @click="getInfo(scope.row.id)">查看详情</el-button>
          <el-dialog
            title="测评详情"
            :visible.sync="dialogVisible"
            width="30%"
          >
            <el-form :label-position="labelPosition" label-width="200px">
              <el-form-item label="孩子姓名">
                <span>{{ info.name }}</span>
              </el-form-item>
              <el-form-item label="孩子年龄">
                <span>{{ info.age }}</span>
              </el-form-item>
              <el-form-item label="测评用时">
                <span>{{ info.evaluation_time }}</span>
              </el-form-item>
              <el-form-item label="手机号">
                <span>{{ info.phone }}</span>
              </el-form-item>
              <el-form-item label="孩子性别">
                <span>{{ info.sexCn }}</span>
              </el-form-item>
              <el-form-item label="测评类型">
                <span>{{ info.tagCn }}</span>
              </el-form-item>
              <el-form-item label="测评年份">
                <span>{{ info.year }}</span>
              </el-form-item>
              <el-form-item label="测评平均分">
                <span>{{ report.totalEQScoreAvg }}</span>
              </el-form-item>
              <el-form-item label="测评第一维度平均分">
                <span>{{ report.firstDimensionAvg }}</span>
              </el-form-item>
              <el-form-item label="测评第二维度平均分">
                <span>{{ report.secondDimensionAvg }}</span>
              </el-form-item>
              <el-form-item label="测评第三维度平均分">
                <span>{{ report.thirdDimensionAvg }}</span>
              </el-form-item>
              <el-form-item label="测评第四维度平均分">
                <span>{{ report.fourthDimensionAvg }}</span>
              </el-form-item>
              <el-form-item label="测评第五维度平均分">
                <span>{{ report.fifthDimensionAvg }}</span>
              </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
            </span>
          </el-dialog>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pages.currentPage"
      :page-size="pages.per_page"
      layout="total,prev, pager, next"
      :total="pages.total"
      style="text-align: center"
    >
    </el-pagination>
  </div>
</template>

<script>
  import mixin from "../../js/mixin";
  import global from "../../js/global";

  export default {
    name: "homePage",
    mixins: [mixin],
    data() {
      return {
        labelPosition: 'left',
        info: {},
        report: {},
        dialogVisible: false,
        is_check: false,
        is_page: true,
        api_url: "test",
        item: {},
        tag: {}
      };
    },
    components: {},
    mounted() {
    },
    created() {
      this.admin_type = localStorage.getItem("admin_type");
      this.title = this.$route.meta.title;
      this.init();
    },
    methods: {
      getExcelReport(e) {
        window.open(global.baseRequire  + '/getExcelReport?tag=' + e)
      },
      getInfo(e) {
        this.dialogVisible = true
        this.global.httpRequest("getInfo", {id: e}).then((res) => {
          this.info = res;
          this.report = res.report
        });
      },
      reset() {
        (this.query = {
          city_id: "",
          area_id: "",
          one_id: "",
          two_id: "",
          name: "",
        }),
          this.getData(true);
      },
      init() {
        this.getData();
        this.getTag();
      },
      getTag() {
        this.global.httpRequest("getTag").then((res) => {
          this.tag = res
        });
      },
    }
  };
</script>

<style scoped>
  .contents {
    padding: 1.875rem;
    display: flex;
    flex-wrap: wrap;
  }

  .dateTitle {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2.5rem;
  }

  .dateInfo {
    width: 18.5%;
    text-align: center;
    background: #fff;
    color: #6f737a;
    line-height: 3.75rem;
    cursor: pointer;
  }

  .saleDate {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.625rem;
  }

  .saleDate > div {
    width: 48.5%;
    padding: 2.5rem 0;
    background: #fff;
  }

  .saleDate > div > span {
    display: block;
    margin-left: 1.875rem;
    color: #6f737a;
    margin-bottom: 1.5rem;
  }

  .saleDate > div > div {
    margin-left: 1.875rem;
    color: #333;
    font-size: 1.5rem;
  }

  .goodsInfo {
    width: 13.5rem;
    padding: 1.25rem 0.75rem;
    display: flex;
    flex-direction: column;
  }

  .goodsInfo > div {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.875rem;
  }

  .revenueInfo {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  .revenueInfo > span {
    color: #6f737a;
    margin-bottom: 1.5rem;
  }

  .revenueInfo > div {
    color: #333;
    font-size: 2rem;
  }

  .text {
    font-size: 14px;
  }

  .item {
    padding: 18px 0;
  }

  .titleInfo {
    display: flex;
    align-items: center;
    margin: 2rem 5rem;
    margin-left: 2rem;
  }

  .el-form-item {
    margin-bottom: 0rem;
  }
</style>
